﻿@model IStoreMappingModel

<script type="text/javascript">
        $(document).ready(function () {
            $("#@Html.FieldIdFor(model => model.LimitedToStores)").click(toggleStoreMapping);
            toggleStoreMapping();
        });
        function toggleStoreMapping() {
            if ($('#@Html.FieldIdFor(model => model.LimitedToStores)').is(':checked')) {
                $('#pnl-available-stores').show();
            }
            else {
                $('#pnl-available-stores').hide();
            }
        }
</script>
<div class="form-horizontal">
    <div class="form-body">
        <div class="form-group">
            <admin-label asp-for="LimitedToStores" />
            <div class="col-md-6 col-sm-6">
                <label class="mt-checkbox mt-checkbox-outline control control-checkbox control control-checkbox">
                    <admin-input asp-for="LimitedToStores" />
                    <div class="control__indicator"></div>
                </label>
                <span asp-validation-for="LimitedToStores"></span>
            </div>
        </div>
        <div class="form-group" id="pnl-available-stores">
            <admin-label asp-for="AvailableStores" />
            <div class="col-md-6 col-sm-6">
                @if (Model.AvailableStores != null && Model.AvailableStores.Count > 0)
                {
                    @await Component.InvokeAsync("CommonMultistoreDisabledWarning")
                    <div class="mt-checkbox-list">
                        @foreach (var store in Model.AvailableStores)
                        {
                            <label class="mt-checkbox mt-checkbox-outline control control-checkbox control control-checkbox">
                                <input type="checkbox" name="SelectedStoreIds" value="@store.Id" checked="@(Model.SelectedStoreIds != null && Model.SelectedStoreIds.Contains(store.Id))" />@store.Name
                                <div class="control__indicator"></div>
                            </label>
                        }
                    </div>
                }
                else
                {
                    <div class="note note-info">
                        No stores defined
                    </div>
                }
            </div>
        </div>
    </div>
</div>